<template>
  <div class="fencengtu-pic-parent" v-if="data.markType == 1">
    <div
      class="fencengtu-pic"
      :model="layerPic"
      :style="{
        backgroundImage: 'url(' + layerPic + ')',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat'
      }"
    >
      <el-popover
        v-for="item in markerArr"
        placement="top-start"
        trigger="hover"
        :key="item.id"
        :title="item.makeName"
      >
        <div class="text item">
          <div>关联设备：{{ item.relateFcfNames }}</div>
          <div>位置：{{ fbsName }}</div>
        </div>
        <img
          slot="reference"
          v-if="item.url"
          :src="item.url"
          :style="{
            width: markerW * zoomPercent + 'px',
            height: markerH * zoomPercent + 'px',
            position: 'absolute',
            left: item.xAxis + '%',
            top: item.yAxis + '%',
            cursor: 'pointer',
            marginTop: '-' + (markerW * zoomPercent) / 2 + 'px',
            marginLeft: '-' + (markerW * zoomPercent) / 2 + 'px',
            borderRadius: (markerW * zoomPercent) / 2 + 'px',
            zIndex: 2
          }"
        />
      </el-popover>
      <img
        v-for="(item, index) in markerArr"
        :key="index"
        v-if="item.alertUrl"
        :src="item.alertUrl"
        :style="{
          width: markerAlarmW * zoomPercent + 'px',
          height: markerAlarmH * zoomPercent + 'px',
          position: 'absolute',
          left: item.xAxis + '%',
          top: item.yAxis + '%',
          cursor: 'pointer',
          marginTop: '-' + (markerAlarmW * zoomPercent) / 2 + 'px',
          marginLeft: '-' + (markerAlarmW * zoomPercent) / 2 + 'px',
          borderRadius: (markerAlarmW * zoomPercent) / 2 + 'px',
          zIndex: 1
        }"
      />
    </div>
  </div>
  <div v-else class="fmap-container">
    <div id="fmapCon"></div>
  </div>
</template>

<script>
import loadFengmap from "@/libs/fmap/loadFengmap.js";
let fengMap = null;
let firstLayer = null;
export default {
  name: "LayeredMap",
  props: {
    data: {
      required: true
    }
  },
  data() {
    return {
      query: this.$attrs.parames,
      layerPic: "",
      zoomPercent: 1, //标注点缩放比例
      markerW: 32, //标注点默认大小
      markerH: 32, //标注点默认大小
      markerAlarmW: 40, //报警图标默认大小
      markerAlarmH: 40, //报警图标默认大小
      markerArr: [], //标注点集合
      fbsName: "", //标注点位置
      fmapPrams: this.data.orgIndoorInfo
    };
  },
  created() {
      let that = this;
      // markType 标注类型 1分层图 2室内地图 0 没有标注信息
      that.markType = that.data.markType;
      this.$nextTick(() => {
        if (that.data.markType == 1) {
          this.$nextTick(() => {
            that.openCurrentLayer();
          });
        } else {
          //室内地图
          this.$nextTick(() => {
            loadFengmap()
              .then(() => {
                that.openFmap();
              })
              .catch(err => {
                console.error("地图加载失败");
              });
          });
        }
      });
  },
  methods: {
    openCurrentLayer: function() {
      let that = this;
      that.layerPic = that.data.layeredGraphUrl;
      that.fbsName = that.data.fbsName;
      that.zoomPercent =
        (that.data.iconPercent ? that.data.iconPercent : 100) / 100;
      that.markerArr = that.data.picturesMaker;
    },
    openFmap: function() {
      let that = this;
      let curIndoor = that.data.indoorId;
      fengMap = new fengmap.FMMap({
        // 渲染dom
        container: document.getElementById("fmapCon"),
        // 地图数据位置
        mapServerURL:
          REMOTESTATICPATH +
          "fmap/data/" +
          that.data.orgIndoorInfo.fmapId,
        // 主题数据位置
        mapThemeURL:
          REMOTESTATICPATH + that.data.orgIndoorInfo.topicUrl,
        //    fullScreen:true,
        // 默认比例尺级别设置为20级
        defaultMapScaleLevel:that.data.orgIndoorInfo.scaleLevel || 20,
        // [16, 23], 比例尺级别范围， 16级到23级
        // mapScaleLevelRange: [15, 23],
        //两楼层间的高度
        defaultGroupSpace: 15,
        // 关闭聚焦层切换的动画显示
        // focusAnimateMode: true,
        // defaultBackgroundColor: "#fff",
        defaultThemeName: that.data.orgIndoorInfo.topicName,
		    modelSelectedEffect: true,
        focusAlphaMode: false,
        // 设置最大倾斜角
        //defaultMaxTiltAngle : 40,
        // 设置倾斜角，默认倾斜角为60度
        // defaultTiltAngle: 30,
        // 开发者申请应用下web服务的key
        // key : '57c7f309aca507497d028a9c00207cf8',
        // 开发者申请应用名称
        // appName : '室内研发SDK_2_0',
        key: that.data.orgIndoorInfo.appKey,
        appName: that.data.orgIndoorInfo.appName
      });
      // 打开Fengmap服务器的地图数据和主题
      fengMap.openMapById(that.data.orgIndoorInfo.fmapId);

      // 地图加载完回调事件
      fengMap.on("loadComplete", function() {
        // map.themeName='967110';
        //map.viewMode = fengmap.FMViewMode.MODE_2D;
        // 默认楼层加载完后不显示，需自定义设置要显示的楼层和聚焦层
        //隐藏所有楼层，指定显示楼层
        if (curIndoor) {
          //隐藏所有楼层，展示对应楼层
          fengMap.visibleGroupIDs = [curIndoor * 1]
          fengMap.focusGroupID = curIndoor * 1; //设置聚焦楼层
        }
        // 设置透明
        fengMap.setBackgroundColor("#2b8fff", 0);
        if (fengMap.fmapID == "njtlzhxf") {
          fengMap.mapScale = 210;
        }
        that.addOneMarker(that.data);
      });
    },
    //显示一个
    addOneMarker: function(coords) {
      if (coords) {
        let location = JSON.parse(coords.mapLocation);
        let curIndoor = coords.indoorId ? coords.indoorId*1 : 1
        let groupLayer = fengMap.getFMGroup(curIndoor);
        firstLayer = groupLayer.getOrCreateLayer("imageMarker");
        let im = new fengmap.FMImageMarker({
          x: location[0].x,
          y: location[0].y,
          z: location[0].z,
          name: "",
          height: 2.5,
          url: coords.mapIcon,
          size: 28,
          callback: function() {
            im.alwaysShow();
          }
        });
        firstLayer.addMarker(im);

        //中心点
        let pnt = {
          x: location[0].x,
          y: location[0].y,
          groupID: curIndoor, //目标层GroupID
          callback: function() {
            //跳转中心点完成
          }
        };
        // //跳转
        setTimeout(()=>{
          fengMap.moveTo(pnt);
        },500)
      }
    }
  }
};
</script>

<style lang="less">
.fencengtu-pic-parent {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  .fencengtu-pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
.fmap-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  div {
    width: 100%;
    height: 100%;
  }
}
</style>
